<template>
  <view class="music" v-if="musicInfo && playMusic" @click.stop="gotoSongDetail">
    <view class="music_left">
      <view class="music_image" :class="isPlay?'running':'paused'">
        <image :src="musicInfo.al ? musicInfo.al.picUrl : ''"></image>
      </view>
      <view class="music_user" v-if="musicInfo.al">
        <text class="music_user_info">{{ musicInfo.name }}</text> - <text>{{ musicInfo.ar[0].name }}</text>
      </view>
      <view class="music_user" v-else>
        <text class="music_user_info">未知</text>
      </view>
    </view>
    <view class="music_right">
      <view class="play_icon" @click.stop="audioPlayer">
        <text class="iconfont icon-yinlequan" v-show="!isPlay"></text>
        <text class="iconfont icon-zanting1" v-show="isPlay"></text>
      </view>
      <text class="iconfont icon-bofangliebiao1"></text>
    </view>
  </view>
</template>

<script setup>
  import innerAudioContext from '@/util/innerAudioContext.js'
  import {
    useMusicStore
  } from '@/store/modules/musicStore.js'
  import {
    storeToRefs
  } from 'pinia'
  import {
    ref,
    watch,
    onBeforeUnmount
  } from 'vue'
  const musicStore = useMusicStore()
  const {
    musicInfo,
    isPlay,
    currentTime,
    duration,
    playMusic,
    playlistAllData
  } = storeToRefs(musicStore)
  const {
    getMusicPlayer,
    nextSong
  } = musicStore

  // 跳转到歌曲详情页
  const gotoSongDetail = () => {
    // isShow.value = true
    uni.navigateTo({
      url: '/subpages/songDetail/songDetail'
    })
  }

  // 点击播放暂停
  const audioPlayer = () => {
    isPlay.value = !isPlay.value
  }
  watch(isPlay, () => {
    if (isPlay.value) {
      innerAudioContext.play()
    } else {
      innerAudioContext.pause()
    }
  })
  watch(playMusic, () => {
    innerAudioContext.playAudio(playMusic.value.url)
  })
  // 开始播放
  innerAudioContext.onPlay(() => {
    console.log('开始播放');
  });
  // 监听进度条更新
  innerAudioContext.onTimeUpdate(() => {
    currentTime.value = innerAudioContext.currentTime()
  })
  // 播放器错误
  innerAudioContext.onError((res) => {
    console.log(res.errMsg);
    console.log(res.errCode);
  });
  // 音频自然播放结束事件
  innerAudioContext.onEnded(() => {
    console.log('音频自然播放结束');
    nextSong()
  })
  // 音频停止事件	
  innerAudioContext.onStop(() => {
    console.log('音频停止了');
  })

  // 组件销毁前
  onBeforeUnmount(() => {
    currentTime.value = innerAudioContext.currentTime()
  })
</script>

<style lang="scss" scoped>
  .music {
    height: 100rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    box-shadow: 2px -2px 10px #aaa4a4;
    position: fixed;
    z-index: 999;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .music_left {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .music_image {
        height: 70rpx;
        width: 70rpx;
        padding: 10rpx;
        flex-shrink: 0;
        background-color: black;
        border-radius: 90px;
        margin-right: 10rpx;

        image {
          height: 100%;
          width: 100%;
          border-radius: 90px;
        }
      }

      .music_user {
        font-size: 25rpx;
        color: #aaa4a4;

        .music_user_info {
          font-size: 30rpx;
          color: black;
        }
      }
    }

    .music_right {
      display: flex;
      height: 100%;
      width: 150rpx;
      flex-shrink: 0;
      justify-content: space-between;
      align-items: center;

      .play_icon {
        border-radius: 90px;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &:active {
          background-color: #aaa4a4;
        }
      }

      .iconfont {
        font-size: 55rpx;
      }
    }
  }

  .paused {
    animation: rotate 3s infinite linear;
    animation-play-state: paused;
  }

  .running {
    animation: rotate 3s infinite linear;
    animation-play-state: running;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
</style>